<template>
  <div>
    <van-nav-bar title="嗨购登录" @click-left="$router.push('/home')">
      <template #left>
        <van-icon name="arrow-left" size="20" color="black" />
      </template>
    </van-nav-bar>

    <van-cell-group border>
      <van-field
        v-model="tel"
        label="帐号"
        placeholder="请输入电话号码或账号"
        autofocus
        required
      />
    </van-cell-group>
    <van-cell-group border>
      <van-field
        v-model="password"
        label="密码"
        placeholder="请输入密码"
        required
        :type="pas?'password':'text'"
      >
        <template #button>
          <!-- <van-icon name="eye-o" /> -->
          <van-icon :name='pas?"closed-eye":"eye-o"' @click="icon"/>
        </template>
      </van-field>
    </van-cell-group>

    <van-button
      class="but"
      type="danger"
      round
      block
      @click="login"
      :disabled="!flag"
      >登录</van-button
    >

    <p @click="$router.push('/register')" class="reg">没有账号？去注册一个</p>
  </div>
</template>

<script>
// import Vue from "vue";
// import { NavBar } from "vant";
// Vue.use(NavBar);   相关联的组件引入相同的vant过后，可以不需要重新引入
import Vue from "vue";
import { Field, Cell, CellGroup, Button, Dialog , Icon ,} from "vant";
import { Login } from "../api/user";
Vue.use( Icon );
Vue.use(Dialog);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Field);
Vue.use(Button);
export default {
  data() {
    return {
      tel: "",
      password: "",
      pas:true,
    };
  },
  computed: {
    flag() {
      return (
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
          this.tel
        ) &&
        /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*+-/?~·])\S*$/.test(
          this.password
        )
      );
    },
  },
  methods: {
    login() {
      Login({ loginname: this.tel, password: this.password }).then((data) => {
        console.log(data);
        switch (data.data.code) {
          case "200":
            localStorage.setItem("token", data.data.data.token);
            localStorage.setItem("userid", data.data.data.userid);
            this.$router.push("/home");
            break;
          case "10010":
            Dialog.alert({
              message: "该用户不存在",
            }).then(() => {
              // on close
            });
            break;
          case "10011":
            Dialog.alert({
              message: "密码输入有误，请检查后输入",
            }).then(() => {
              // on close
            });
            break;
        }
      });
    },
    icon(){
        // console.log(1);
        this.pas=!this.pas
    }
  },
};
</script>

<style scoped>
.but {
  width: 80%;
  margin: 1rem auto;
}
.reg {
  text-align: center;
}
</style>